<!--各个学校管理员的数据信息-->
<template>
  <div id="dishType">
    <el-card style="height:100%">
      <h3>餐类管理</h3>
      <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible = true"  round>新增菜品类别</el-button>
      <el-form label-width="100px" style="margin-top: 10px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="类别名称">
              <el-input v-model="queryData.dishTypeName" placeholder="请输入类别名称" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类别编号">
              <el-input v-model="queryData.dishType" placeholder="请输入类别编号" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="5"
            style="
              text-align: center;
              justify-content: center;
              display: flex;
            "
          >
          <el-col :span="5">
            <el-button @click="handleDelete('批量')" type="primary" icon="el-icon-batchdel"  round>批量删除</el-button>
          </el-col>
          </el-col>
            <el-col
            :span="5"
            style="
              text-align: center;
              justify-content: center;
              display: flex;
            "
          >
            <el-button @click="handleQuery" type="primary" icon="el-icon-search"  round>搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="pageInfo.list" border style="text-align: center; width: 100%; height: 100%" @selection-change="handleSelectionChange">
        <el-table-column  type="selection"  width="50px"></el-table-column>
        <el-table-column prop="dishTypeId" label="序号"></el-table-column>
        <el-table-column prop="dishTypeName" label="类别名称"></el-table-column>
        <el-table-column prop="dishTypeNo" label="类别编号"></el-table-column>
        <el-table-column prop="note" label="备注"></el-table-column>
        <el-table-column prop="name" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="open = true"  round>编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete('单删',scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:20px; text-align: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        ></el-pagination>
      </div>

      <el-dialog title="新增菜品类别" :visible.sync="dialogFormVisible">
          <el-form class="newdishTypeForm" label-width="50px" :model="newdishTypeForm">
        <el-form-item label="名称">
          <el-input v-model="newdishTypeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-input v-model="newdishTypeForm.number"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newdishTypeForm.school"></el-input>
        </el-form-item>
      </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

            <el-dialog title="修改菜品类别" :visible.sync="open">
          <el-form class="newdishTypeForm" label-width="50px" :model="newdishTypeForm">
        <el-form-item label="名称">
          <el-input v-model="newdishTypeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-input v-model="newdishTypeForm.number"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newdishTypeForm.school"></el-input>
        </el-form-item>
      </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="open = false">取 消</el-button>
          <el-button type="primary" @click="open = false">确 定</el-button>
        </div>
      </el-dialog>


    </el-card>
  </div>
</template>
<script>
import { queryDishType, addDishType, deleteDishType } from "@/api/xiaowu";
export default {
  name: "dishType",
  //组件创建
  created() {},
  mounted() {},
  data() {    
    return {
      // 总条数
      total: 0,
      // 当前页
      pageNum: 0,
      // 每页数据量
      pageSize: 0,
      // 查询参数
      queryData:{
        dishTypeName:"",
        dishTypeId:"",
        pageSize: "10",
        pageNum: "1",
      },

      newdishTypeForm: {
        name: undefined,
        clazz: undefined,
        clazzName: undefined,
        number: undefined,
        school: undefined,
        photoUrl: undefined,
      },
      pageInfo: {}, 
      open: false,
      //删除id数组
      delete:{dishTypeId: [],},
      dialogFormVisible: false,
      input_username: "",
      input_id: "",
      checked: true,
      val:"20"
    };
  },
  methods: {
    handleQuery() {
      this.loading = true;
      queryDishType(this.queryData).then((response) => {
        this.pageInfo = response.data.pageInfo;
        this.loading = false;
        this.$message.success("查询成功");
        this.handleQueryRest();
      });
    },
    //查询

    /**重置查询表单 */
    handleQueryRest() {
      this.queryData = {
        dishTypeName:"",
        dishTypeId:"",
        pageSize: "10",
        pageNum: "1",
      };
    },
    handleAdd() {
      this.dialognewVisible = false;
      console.log(this.newdishTypeForm);
      // addStudent(this.newdishTypeForm);
      this.handleQuery();
    },
    
    handleSelectionChange (val){
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.dishTypeId)
        })
      console.log(checkArr),
      this.delete.dishTypeId = checkArr
    },




   handleDelete(type,row) {
      if(type === '批量' ){
        if (this.delete.dishTypeId.length === 0) {
          return this.$message.error('请选择删除对象')
        }
        this.$confirm('确定删除勾选套餐, 是否继续?', '确定删除', {
              'confirmButtonText': '确定',
              'cancelButtonText': '取消',
            }).then(() => {
              deleteDishType(this.delete).then(res => {
                if (res.data.code == '200') {
                  this.$message.success('删除成功！')
                  this.handleQuery()
                } else {
                  console.log(res),
                  this.$message.error(res.msg || '操作失败')
                }
              }).catch(err => {
                this.$message.error('请求出错了：' + err)
              })
            })
      }else{

      //单删代码
      this.$confirm(
        '是否确认删除菜品类别"' + row.dishTypeName + '"的信息?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then( ()=> {
          // var data={"dishId": row.dishId};
          // data:"da="+JSON.stringify([{"name":"zhan"},{"age":"25"}])
          this.delete.dishTypeId.push(row.dishTypeId);
          console.log(this.delete);
        })
        .then(() => {
              deleteDishType(this.delete).then(res => {
                if (res.data.code == '200') {
                  this.$message.success('删除成功！')
                  this.handleQuery()
                } else {
                  console.log(res),
                  this.$message.error(res.msg || '操作失败')
                }
              }).catch(err => {
                this.$message.error('请求出错了：' + err)
              })
            });
      }
    },


  },
};
</script>
<style lang="less" scoped>
element.style {
  height: 100%;
}
</style>

